<template>
  <el-dialog
    ref="drawerRef"
    v-model="dialog"
    title="导入"
    :before-close="handleClose"
    class="demo-drawer"
    width="80%"
    v-loading="loading"
  >
    <div class="demo-drawer__content">
      <div>
        共<span style="color: red">{{ total }}</span
        >张票据，票面金额共<span style="color: red">{{ money }}</span
        >万元
      </div>

      <el-divider />
      <el-table
        ref="multipleTableRef"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :row-style="tableRowStyle"
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="billNo" label="票号" width="300" align="center" />
        <el-table-column prop="acceptorName" label="承兑人" align="center" show-overflow-tooltip />
        <el-table-column prop="billAmount" label="票面金额" width="100" align="center" />
        <el-table-column prop="expirationDate" label="到期日期" width="100" align="center" />
        <el-table-column prop="bill_back_user" label="背书人" align="center" show-overflow-tooltip />
        <el-table-column label="入库" align="center">
          <el-table-column prop="enter_time" width="100" label="时间" align="center" />
          <el-table-column prop="enter_price" label="每十万价格" align="center" />
          <el-table-column prop="enter_discount" label="贴息费" align="center" />
          <el-table-column prop="enter_finally" label="最终价格" align="center" />
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; display: flex; justify-content: flex-end">
        <el-button type="primary" @click="doBatchCrate" :loading="buttonLoading">确 认</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { doBatchCrateApi } from "@/api/billv2"
// import { doBatchCrateApi } from "@/api/bill"
import { sumValuesForName } from "@/utils/common"
import { ElMessage, ElTable } from "element-plus"
import { reactive, ref, nextTick } from "vue"

const dialog = ref(false)
const loading = ref(false)
const buttonLoading = ref(false)
const total = ref(0)
const money = ref(0)
const tableData = ref<any>([])
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const drawerRef = ref<any>(null)
const dialogShow = async (row: any) => {
  if (row.length > 0) {
    tableData.value = row
    total.value = row.length
    money.value = sumValuesForName(row, "billAmount")
    nextTick(() => {
      // 在这里进行 DOM 操作，确保在下一次 DOM 更新之后执行
      toggleSelection(tableData.value)
    })

    dialog.value = true
  } else {
    ElMessage.warning("文件错误")
    return
  }
}
const toggleSelection = (rows?: any) => {
  if (rows) {
    rows.forEach((row: any) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined)
    })
  } else {
    multipleTableRef.value!.clearSelection()
  }
}
const handleClose = () => {
  cancelForm()
  emit("CreateClose", true)
}
const emit = defineEmits(["CreateClose"])
const cancelForm = () => {
  loading.value = false
  buttonLoading.value = false
  dialog.value = false
}

let lists = reactive({})
const handleSelectionChange = (val: any) => {
  lists = {}
  total.value = val.length
  money.value = sumValuesForName(val, "billAmount")
  Object.assign(lists, {}, val)
}

const tableRowStyle = ({ row }: any) => {
  if (row.billRepeat === 2) {
    return {
      background: "#E6A23C"
    }
  }
  return {}
}

const doBatchCrate = async () => {
  if (Object.keys(lists).length === 0) {
    ElMessage.warning("请选择数据")
    return
  }
  buttonLoading.value = true
  await doBatchCrateApi({
    lists: lists
  })
  buttonLoading.value = false
  ElMessage.success("操作成功")
  handleClose()
  return
}

defineExpose({ dialogShow })
</script>

<style scoped lang="scss">
.heads {
  display: flex;
  justify-content: end;
  margin-bottom: 10px;
}

.heads div {
  margin-left: 10px;
}

.demo-drawer__footer {
  margin-top: 10px;
  display: flex;
  justify-content: end;
}

.logBox {
  margin-top: 20px;
}
</style>
